<script>
/**
 * @desc 选择分类时的选项
 */

export default {
  name: 'category-item',
  props: { ico: String, active: Boolean, onClick: Function }
}
</script>

<template>
  <div
    :key="index"
    :class="$sty.item"
  >
    <div :class="[$sty.border, active?$sty.active:null]"></div>
    <img
      :class="$sty.innerIco"
      mode="aspectFill"
      :src="ico"
    >
  </div>
</template>

<style lang="scss" module>
.item {
  position: relative;
  width: 20%;
  margin-bottom: $content-box-padding;
  padding-top: 20%;
  border-radius: 50%;
  background-color: $main-gray;
  &:not(:nth-child(4n)) {
    margin-right: 6.66%;
  }
}

.border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $main-red;
  opacity: 0;
  transition: all 0.25s;

  &.active {
    opacity: 1;
  }
}

.innerIco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
